<template>
  <div>
    <p>vue3--Demo(使用setup函数)--组件provide&inject</p>
    <a-divider>组件--子孙组件，无限极的数据向子孙级组件单向传递</a-divider>
    <p
      >根组件--数据信息：dataFlag:{{ dataFlag }} color:{{ color }} fixModelData:{{
        fixModelData
      }}timeFlagData:{{ timeFlagData }}</p
    >
    <a-space size="middle">
      <a-button type="primary" @click="color = 'red'">红色</a-button>
      <a-button type="primary" @click="color = 'blue'">蓝色</a-button>
      <a-button type="primary" @click="color = 'green'">绿色</a-button>
      <a-button type="primary" @click="generateData"
        >先点击此按钮自动生成传递至子组件的数据</a-button
      >
    </a-space>
    <a-divider>组件--子孙组件，以下部分为Son组件部分</a-divider>
    <Demo31Son1 />
  </div>
</template>
<script lang="ts">
  import { defineComponent, ref, reactive, provide } from 'vue';
  import { DataModel, TimeAndFlagDataModel } from './data';
  import { message } from 'ant-design-vue';

  //引入子组件
  import Demo31Son1 from './Demo31Son1.vue';
  import { readonly } from 'vue';

  export default defineComponent({
    components: { Demo31Son1 },
    setup() {
      console.log('vue3--Demo(使用setup函数)--组件provide&inject--根组件--setup 函数 执行了。');

      //定义传递给子组件的数据
      const dataFlag = ref<boolean>(true);
      const color = ref('red');
      const fixModelData: DataModel = reactive({
        id: '初始化ID值',
        name: '初始化name值',
        flag: true,
      });
      const timeFlagData: TimeAndFlagDataModel = reactive({
        time: new Date(),
        flag: new Date().getSeconds() % 3 > 1,
      });
      function generateData() {
        dataFlag.value = !dataFlag.value;
        fixModelData.id = '改变后的ID值';
        fixModelData.name = '改变后的name值';
        fixModelData.flag = !fixModelData.flag;

        var now = new Date();
        timeFlagData.time = now;
        timeFlagData.flag = now.getSeconds() % 3 > 1;
      }

      //测试在父组件中提供方法给子孙组件调用
      function testProvideMethod() {
        message.info('根组件中提供的方法弹出的提示信息', 5);
      }

      //使用provide向子孙组件提供数据
      provide('color', color);
      //测试子孙组件中指定默认值，在此设置不使用provide提供数据
      // provide('dataFlag', dataFlag);
      provide('data1', fixModelData);
      //测试提供时指定为readonly，不让子孙组件进行修改，指定为readonly后修改时会有警告
      provide('data2', timeFlagData);
      // provide('data2', readonly(timeFlagData));
      provide('testProvideMethod', testProvideMethod);

      return {
        dataFlag,
        color,
        fixModelData,
        timeFlagData,
        generateData,
      };
    },
  });
</script>
<style scoped></style>
